<template>
  <div class="homepage">
    {{ activeCategrayIndex }}
    <router-link to="/morecomment/:id">去往帖子</router-link>
    <HomeHeader />
    <van-tabs v-model="activeCategrayIndex" background="#e4e4e4" sticky>
      <van-tab
        v-for="category in categoryList"
        :title="category.name"
        :key="category.id"
        background="#f2f2f2"
      >
        <van-list
          @load="loadMore"
          :immediate-check="false"
          v-model="category.loading"
          :finished="category.finished"
          finished-text="别再拉拉扯扯"
        >
          <Article
            :articleData="article"
            v-for="article in category.articleList"
            :key="article.id"
          />
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Article from "../components/Article";
import HomeHeader from "../components/HomeHeader";
export default {
  components: {
    HomeHeader,
    Article,
  },
  data() {
    return {
      activeCategrayIndex: 0,
      categoryList: [],
      // articleList: [],
    };
  },
  watch: {
    activeCategrayIndex(newVal) {
      // 如果点击分类列表的倒数第二个索引，就需要跳转页面：
      const currentCategory = this.categoryList[this.activeCategrayIndex];

      if (newVal == this.categoryList.length - 1) {
        this.$router.push("/manage");
      } else {
        if (currentCategory.articleList.length == 0) {
          this.loadArticle();
        }
      }
    },
  },
  created() {
    // 如果本地有数据的时候，就拿出来：
    if (localStorage.getItem("activeList")) {
      const res = {
        data: {
          data: JSON.parse(localStorage.getItem("activeList")),
        },
      };
      this.categoryList = res.data.data.map((item) => {
        return {
          ...item,
          articleList: [],
          pageIndex: 1,
          pageSize: 6,
          loading: false,
          finished: false,
        };
      });
      // 在标题栏添加一个加号：为新建栏目管理页面做准备
      this.categoryList.push({
        name: "+",
      });

      this.loadArticle();
    } else {
      this.$axios({
        url: "/category",
      }).then((res) => {
        // console.log(res.data);
        // const { data } = res.data;
        this.categoryList = res.data.data.map((item) => {
          return {
            ...item,
            articleList: [],
            pageIndex: 1,
            pageSize: 6,
            loading: false,
            finished: false,
          };
        });
        // 在标题栏添加一个加号：为新建栏目管理页面做准备
        this.categoryList.push({
          name: "+",
        });
        console.log(this.categoryList);
        this.loadArticle();
      });
    }
  },
  methods: {
    loadMore() {
      const currentCategory = this.categoryList[this.activeCategrayIndex];
      currentCategory.pageIndex += 1;
      this.loadArticle();
    },
    loadArticle() {
      // 当前分类列表是 this.categoryList
      // 当前激活分类的索引是： this.activeCategrayIndex
      // 当前激活分类：this.categoryList[this.cativeCategrayIndex]
      const currentCategory = this.categoryList[this.activeCategrayIndex];

      this.$axios({
        url: "/post",
        params: {
          category: currentCategory.id,
          pageIndex: currentCategory.pageIndex,
          pageSize: currentCategory.pageSize,
        },
      }).then((res) => {
        // console.log(res.data);
        // this.articleList = res.data.data;
        // 之前是公共的，现在是单个的
        // currentCategory.articleList = res.data.data;
        currentCategory.articleList = [
          ...currentCategory.articleList,
          ...res.data.data,
        ];
        console.log(this.categoryList);
        currentCategory.loading = false;
        if (res.data.data < currentCategory.pageSize) {
          currentCategory.finished = true;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
// /deep/.ax_default box_3 {
//   padding: 0 10 / 360 * 100vw;
// }
/deep/.van-tab:nth-last-child(2) {
  // 找他的兄弟（同等级的标签）
  position: sticky;
  right: -10 / 360 * 100vw;
  background-color: #e4e4e4;
  width: 54 / 360 * 100vw;
  line-height: 44 / 360 * 100vw;
  font-size: 20 / 360 * 100vw;
}
</style>